<template>
    <div>
        <el-row :gutter="20" class="g-nav">
            <el-col :span="12">
                <el-button-group size="small">
                    <el-button type="warning"
                        ><el-icon><Refresh /></el-icon> 刷新</el-button
                    >
                    <el-button type="warning" @click="onAddRole">
                        <el-icon class="el-icon--right"><Plus /></el-icon> 新增
                    </el-button>
                </el-button-group>
            </el-col>
        </el-row>

        <el-table
            stripe
            border
            :data="roleList"
            style="width: 100%; text-align: center"
        >
            <el-table-column
                prop="r_id"
                label="ID"
                width="180"
            ></el-table-column>

            <el-table-column prop="rolename" label="角色名" />
            <el-table-column prop="description" label="描述" />
            <el-table-column label="操作" width="380">
                <template #default="scope">
                    <el-button
                        type="warning"
                        size="small"
                        @click="onAuthorManager(scope.row.r_id)"
                        >权限管理</el-button
                    >
                    <el-button
                        type="success"
                        size="small"
                        @click="onAuthorResource(scope.row.r_id)"
                        >资源权限</el-button
                    >
                    <el-button
                        size="small"
                        type="primary"
                        @click="onEdit(scope.row)"
                        >编辑</el-button
                    >
                    <el-popconfirm
                        title="确认删除吗？"
                        confirm-button-text="确认"
                        cancel-button-text="取消"
                        @confirm="onDelete(scope.row.r_id)"
                    >
                        <template #reference>
                            <el-button size="small" type="danger"
                                >删除</el-button
                            >
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- 权限管理 -->
        <el-drawer
            ref="drawerRef"
            v-model="displayAuthorDialog"
            title="权限管理"
            direction="rtl"
        >
            <AuthorManage
                v-if="displayAuthorDialog"
                :currentRoleId="roleId"
            ></AuthorManage>
        </el-drawer>

        <el-dialog title="添加角色" v-model="displayRoleDialog">
            <RoleDialog
                v-if="displayRoleDialog"
                @close="onRoleDialogClose"
            ></RoleDialog>
        </el-dialog>

        <!-- 资源权限 -->
        <el-drawer
            ref="drawerResRef"
            v-model="displayAuthorResDialog"
            title="资源权限"
            direction="rtl"
        >
            <AuthorResManage
                v-if="displayAuthorResDialog"
                :currentRoleId="roleId"
            ></AuthorResManage>
        </el-drawer>
    </div>
</template>

<script setup >
import RoleDialog from '@/components/RoleDialog.vue'
import { Refresh, Plus } from '@element-plus/icons-vue'
import AuthorManage from '@/components/AuthorManage.vue'
import AuthorResManage from '@/components/AuthorResManage.vue'
import { useRole } from '@/hooks/manager'
const {
    roleId,
    roleList,
    displayAuthorDialog,
    displayRoleDialog,
    displayAuthorResDialog,
    onAuthorManager,
    onAddRole,
    onRoleDialogClose,
    onDelete,
    onEdit,
    onAuthorResource,
} = useRole()
</script>

<style lang="scss" scoped>
.g-nav {
    margin-bottom: 10px;
}
</style>
